<template>
  <view class="page page-grey has-fixed-footer page-delivery">
    <view class="delivery-list">
      <view class="delivery-item" v-for="item in listData" :key="item.id">
        <view class="delivery-item-header">
          <view class="delivery-item-title">
            <fui-text :text="item.logisticsNum" size="28" fontWeight="bold" color="#333"></fui-text>
            <fui-text text="复制" :padding="['0', '10rpx']" size="24" color="#376dfe" @click="handleCopy(item.wldh)"></fui-text>
          </view>
          <!-- <fui-icon class="delivery-item-edit" name="setup"  size="32" color="#376dfe" @click="handleEdit(item.id)"></fui-icon> -->
        </view>
        <view class="delivery-item-content">
          <view class="goods-item" v-for="shopItem in item.items" :key="shopItem.id">
            <image class="goods-item-image" :src="shopItem.sptp"></image>
            <view class="goods-item-info">
              <view class="goods-item-title">{{ shopItem.spmc }}</view>
              <!-- <view class="goods-item-num">x 2</view> -->
            </view>
          </view>
          
        </view>
        <view class="delivery-item-footer">
          <view class="delivery-item-text">
            <fui-text text="物流人员：" size="24" color="#999"></fui-text>
            <fui-text :text="item.wlrymc" size="24" color="#333"></fui-text>
            <fui-text :text="item.wlrysjh" :padding="['0', '10rpx']" size="24" color="#333"></fui-text>
          </view>
          <view class="delivery-item-text">
            <fui-text text="发货时间：" size="24" color="#999"></fui-text>
            
            <fui-text :text="formatDateTime(item.createTime)" size="24" color="#333"></fui-text>
          </view>
          <view class="delivery-item-text">
            <fui-text text="备注信息：" size="24" color="#999"></fui-text>
            <fui-text :text="item.bz" size="24" color="#333"></fui-text>
          </view>
          <view class="delivery-item-link"><fui-text text="查看物流" size="24" color="#F68F40" @click="handleToDetail(item.id,item.wldh)"></fui-text><fui-icon name="arrowright" size="30" color="#F68F40"></fui-icon></view>
        </view>
      </view>
    </view>
    <!-- 加载提示 -->
    <fui-loadmore v-show="listData.length" :state="moreState"></fui-loadmore>
    <fui-empty v-show="!listData.length" src="/static/images/empty/data.png" :isFixed="true" title="暂无发货信息" size="28" color="#999"></fui-empty>
    <view class="ui-fixed-footer">
      <fui-button v-if="isView" text="返回" height="78rpx" @click="tab.navigateBack"></fui-button>
      <fui-button v-else text="新增发货" height="78rpx" @click="tab.navigateTo(addLink)"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow, onReachBottom, onPullDownRefresh	} from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import deliveryApi from '@/api/delivery'
import utils from "@/components/firstui/fui-utils";

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const isView = ref(false)
const addLink = computed(() => `/pages/delivery/form?orderId=${orderId.value}`)

const orderId = ref('')
const queryParams = ref({})
const moreState = ref(1)

onLoad(option => {
  orderId.value = option.orderId
  isView.value = !!option.isView
  if (isView.value) {
    setTitle('物流信息')
  }
})

onShow(() => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    orderId: orderId.value
  }
  getDeliverList()
})

// 物流信息数据
const listData = ref([])
const getDeliverList = () => {
  uni.stopPullDownRefresh()
  try {
    deliveryApi.getDeliveryList(queryParams.value).then((res) => {
      modal.closeLoading()
      if(res.code === 0){
        const resData = res.data && res.data.list ? res.data.list : []
        const newData = resData.map((item) => {
          return {
            ...item,
            logisticsNum : '物流单号' + item.wldh
          }
        })
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (err) {
    modal.closeLoading()
  }
}

const handleEdit = (id) => {
  tab.navigateTo(`/pages/delivery/form?orderId=${orderId.value}&deliveryId=${id}`)
}

const handleCopy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      modal.msg('复制成功')
    },
    fail: (err) => {
      console.error('复制失败', err)
    }
  })
}

// 跳转详情
const handleToDetail = (id,wldh) => {
  tab.navigateTo(`/pages/delivery/logistics?orderId=${orderId.value}&deliveryId=${id}&logisticsNumber=${wldh}`)
}

// 时间格式化
const formatDateTime = (date) => {
  return utils.dateFormatter(date, 'y-m-d h:i:s', 2)
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getDeliverList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...')
    moreState.value = 2
    queryParams.value.pageNo++
    getDeliverList()
  }
})
</script>

<style lang="scss" scoped>
.page-delivery {
  padding-top: 42rpx;
  padding-left: 36rpx;
  padding-right: 36rpx;
  .delivery-list {
    .delivery-item {
      overflow: hidden;
      border-radius: 16rpx;
      background-color: #fff;
      margin-bottom: 24rpx;
      .delivery-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        background-color: #eee;
        padding: 0 28rpx;
        .delivery-item-title {
          flex: 1;
        }
      }
      .delivery-item-content {
        padding: 7rpx 28rpx 14rpx;
        .goods-item {
          display: flex;
          align-items: center;
          padding: 14rpx 0;
          &:not(:last-child) {
            border-bottom: 2rpx solid var(--fui-color-border);
          }
          .goods-item-image {
            flex: 0 0 80rpx;
            width: 80rpx;
            height: 80rpx;
            overflow: hidden;
            border-radius: 8rpx;
            background: #f8f8f8;
            margin-right: 24rpx;
          }
          .goods-item-info {
            flex: 1;
            .goods-item-title {
              max-width: calc(100vw - 280rpx);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-bottom: 5rpx;
              font-size: 24rpx;
              font-weight: bold;
              color: #333;
            }
            .goods-item-num {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
      .delivery-item-footer {
        padding: 0 28rpx 28rpx;
        .delivery-item-link {
          display: flex;
          justify-content: center;
          margin-top: 30rpx;
          line-height: 46rpx;
        }
      }
    }
  }
}
</style>